﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>管理员登录</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/css/default/style.css">
</head>

<body class="loginbody">
    <div class="bg-blur"></div>
    <div id="particles-js">
        <div id="app" class="login-box" v-cloak>
            <el-card>
                <div class="logo"></div>
                <el-form :model="loginForm" :rules="rules" ref="loginForm" @@submit.native.prevent>
                    <el-form-item prop="username">
                        <el-input type="text" v-model="loginForm.username" placeholder="请输入账户名" prefix-icon="el-icon-user"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
                    </el-form-item>
                    <el-form-item prop="codeValue">
                        <el-input type="text" v-model="loginForm.codeValue" placeholder="请输入验证码" prefix-icon="el-icon-postcard">
                            <template slot="append">
                                <img @@click="toggleCode" class="code" :src="imgSrc" alt="点击切换验证码" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" native-type="submit" @@click="submitForm('loginForm')">登 录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>

    <script src="~/lib/particles/particles.min.js"></script>
    <script src="~/lib/particles/particles.config.js"></script>
    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/js/axios.config.js"></script>
    <script>
	//初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                imgSrc: null,
                loginForm: {
                    username: 'demo',
                    password: 'demo888',
                    codeKey: null,
                    codeValue: null
                },
                rules: {
                    username: [
                        { required: true, message: '请输入登录用户名', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入登录密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                    ],
                    codeValue: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                        { len: 4, message: '请输入 4 位的验证码', trigger: 'blur' }
                    ]
                },
            },
            methods: {
                initData: function () {
                    let _this = this;
                    AxiosAjax({

                        url: '/verifycode',
                        success: function (res) {
                            _this.loginForm.codeKey = res.data.key
                            _this.imgSrc = res.data.data
                        }
                    });
                },
                submitForm: function (formName) {
                    let _this = this; //当前页面
                    //表单验证
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            AxiosAjax({
                                method: 'post',
                                url: '/auth/login',
                                data: _this.loginForm,
                                loading: true,
                                success: function (res) {
                                    //存储Token到本地
                                    if (!window.localStorage) {
                                        _this.$message({ type: 'error', message: '浏览器不支持Storage，请升级' });
                                        return false;
                                    }
                                    saveToken(res.data.accessToken, res.data.refreshToken);
                                    //跳转到管理页
                                    window.location.href = '/';
                                }
                            });
                        } else {
                            return false;
                        }
                    });
                },
                //切换验证码
                toggleCode() {
                    this.initData();
                },
            },
            created: function () {
                //初始化数据
                this.initData();
            }
        })
    </script>
</body>
</html>